import React from "react";
import styles from "./NumericalSlider.less";
import {Tooltip} from "antd";

// interface MarkProps{
//   value: number;
//   markStyle?: any;
//   label?: React.ReactNode,
// }

const markDefaultProps = (props) =>{
  const markStyle = props.markStyle || {};
  console.log(markStyle,'.....markStyle')
  return {
    markStyle: {
      height: markStyle.size  || 12,
      width: markStyle.size  || 12,
      backgroundColor: markStyle.color || 'white',
      borderColor: markStyle.borderColor || 'white'
    },
   
    label: props.label || props.value,
    value: props.value,
  }
};
// interface NumericalSliderProps {
//   lineStyle?: any,
//   marks?: Array<MarkProps>,
//   min?: number;
//   max?: number;
//   // 是否显示滑动条两侧的min和max
//   showRange?: boolean;
//   // label呈现的位置，目前只支持上下
//   position?: string;
//   // 是否显示点的数值
//   tooltip?: boolean;
// }

const NumericalSlider = (props) => {
  const position = props.position;
  const lineStyle = {height: props.lineStyle.height || 4, backgroundColor: props.lineStyle.color || 'transparent'};
  console.log(lineStyle)
  let range = props.max - props.min;
  return (
    <div className={styles.slider}>
      <div className={styles.sliderTrack} style={{...lineStyle}} />
      <div className={styles.sliderStep}>
        {
          props.marks.map((mark, index)=>{
            let mp = markDefaultProps(mark);
            let left = `${((mp.value - props.min) % range) / range * 100}%`;
            return props.tooltip ?<Tooltip title={mp.value}  key={index} >
                <div className={styles.sliderHandle} style={{
                  left: left,
                  marginTop: lineStyle.height / 2 - mp.markStyle.height / 2,
                  ...mp.markStyle
                }}
                >
                </div>
              </Tooltip>
                : <div className={styles.sliderHandle} style={{
                  left: left,
                  marginTop: lineStyle.height / 2 - mp.markStyle.height / 2,
                  ...mp.markStyle
                }}
                >
                </div>
          })
        }
      </div>
      <div className={styles.sliderMark} style={{top: position === 'top'? -16: 14 }}>
        {
          props.marks.map((mark, index)=>{
            let mp = markDefaultProps(mark);
            let left = `${((mp.value - props.min) % range) / range * 100}%`;
            return <div
              className={styles.sliderMarkText} key={index + 1}
              style={{
                left: left,
              }}
            >
              {mp.label}
            </div>
          })
        }
        {
          props.showRange &&
          <div className={styles.sliderMarkText} style={{left: `0%`}} key={'start'}>
            {props.min}
          </div>
        }
        {
          props.showRange &&
          <div className={styles.sliderMarkText} style={{left: `100%`}} key={'end'}>
            {props.max}
          </div>
        }
      </div>
    </div>
  )
};

NumericalSlider.defaultProps = {
  lineStyle: { height: 4, color: 'transparent' },
  marks: [],
  min: 0,
  max: 100,
  showRange: false,
  position: "top",
  tooltip: false
};
export default NumericalSlider;
